<script setup>

import CodeMirror6Customed from "@/components/CodeMirror6Customed.vue";
import TinyMCECustomed from "@/components/TinyMCECustomed.vue";
import {ref} from "vue";
import {Bottom, Plus, Top} from "@element-plus/icons-vue";
import HoverEnlargable from "@/components/HoverEnlargable.vue";
import RemarkHoverEnlargable from "@/components/RemarkHoverEnlargable.vue";

let theProps = defineProps(["thePopVisible","remarksAll"])
let tinyMCEContentHtml = ref('');
let codeMirrorCode = ref('');

let testPopVisible1 = ref(false);
const activeNames = ref(['1']);
let testStayEnlarged = ref(false);
let currentEditingIdx = ref(-1);
let tmpToEditingIdx = ref(-1);

function onRemarkEditDone(){
  // console.log("onRemarkEditDone with,",tinyMCEContentHtml.value);
    if(!tinyMCEContentHtml.value||tinyMCEContentHtml.value.length===0){
        return;
    }
    if(currentEditingIdx.value!==-1){
        theProps.remarksAll[currentEditingIdx.value] = tinyMCEContentHtml.value;
    }else{
        theProps.remarksAll.push(tinyMCEContentHtml.value);
    }
    tinyMCEContentHtml.value=""
    currentEditingIdx.value=-1;

}

const confirmOverwriteVisible = ref(false)

function setCurrentEditingRemark(idx) {
    currentEditingIdx.value = idx;
    tinyMCEContentHtml.value = theProps.remarksAll[idx];
}

function editSpecifiedRemark(idx){
    console.log(`remark of All clicked :`,idx);
    if(tinyMCEContentHtml.value&&tinyMCEContentHtml.value.length>0){
        // alert("覆盖?");
        tmpToEditingIdx.value = idx;
        confirmOverwriteVisible.value = true;

    }else{
        setCurrentEditingRemark(idx);
    }
}

function deleteTheRemark(idx){
    console.log("to delete the remark,",idx);
    // [].splice(1,1)
    props.remarksAll?.splice(idx,1);
}
</script>

<template>
<!--    {{remarksAll}}-->
    <div style="display: flex;margin-bottom: 5px">
        <div v-for="(remark,idx) in remarksAll" @click="editSpecifiedRemark(idx)">
          <RemarkHoverEnlargable  :contentHtmlStr="remark" @deleteClicked="deleteTheRemark(idx)">
          </RemarkHoverEnlargable>
        </div>
        <RemarkHoverEnlargable :closable="false" :contentHtmlStr="tinyMCEContentHtml"></RemarkHoverEnlargable>
<!--        <RemarkHoverEnlargable :contentHtmlStr="vModel"></RemarkHoverEnlargable>-->
    </div>
    <el-dialog
            v-model="confirmOverwriteVisible"
            title="Tips"
            width="500"
            :close-on-click-modal="false"
    >
        <span>This is a message</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="tmpToEditingIdx = -1;confirmOverwriteVisible = false">Cancel</el-button>
                <el-button type="primary" @click="setCurrentEditingRemark(tmpToEditingIdx);confirmOverwriteVisible = false">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>

  <TinyMCECustomed v-if="thePopVisible"
                   v-model="tinyMCEContentHtml"
                   :showContenRawTag="false"
                   :currentEditingIdx="currentEditingIdx"
                   @remarkEditDone="onRemarkEditDone"></TinyMCECustomed>
  <!--<br/>-->
  <!--    {{tinyMCEContentHtml}}-->
  <!--    <br/>-->
  <div class="my-button-group">
    <button class="my-button" @click="codeMirrorCode = tinyMCEContentHtml"><el-icon><Bottom/></el-icon></button>
    <button class="my-button" @click="tinyMCEContentHtml = codeMirrorCode;codeMirrorCode=''"><el-icon><Top/></el-icon></button>
  </div>
  <!--    <el-button :icon="Bottom" @click="codeMirrorCode = tinyMCEContentHtml"></el-button>-->
  <!--    <el-button :icon="Bottom" @click="codeMirrorCode = tinyMCEContentHtml">to CodeMirror</el-button>-->
  <!--    <el-button :icon="Top" @click="tinyMCEContentHtml = codeMirrorCode;codeMirrorCode=''"></el-button>-->
  <!--    <el-button :icon="Top" @click="tinyMCEContentHtml = codeMirrorCode">to tinyMCE</el-button>-->

  <!--  border: 1px solid blue;-->
  <HoverEnlargable
      style="
              --aniToWidth:800px;
              --aniToHeight:fit-content;
              --shrinkedWidth:50px;
              --shrinkedHeight:30px;
              --overlieWidth:11px;
              --aniFromWidthType:--shrinkedWidth;
              /*border: 1px solid blue;*/
              margin-left: 3px"
      :toStayEnlarged="testStayEnlarged"
      :style="{zIndex:parseInt($attrs[`zIndex`])}">
    <el-switch v-model="testStayEnlarged"
               inline-prompt
               active-text="保持"
               inactive-text="隐藏"
    ></el-switch>
    <br/>
    <CodeMirror6Customed v-model="codeMirrorCode"></CodeMirror6Customed>

  </HoverEnlargable>

  <!--    <div class="demo-collapse">-->
  <!--        <el-collapse v-model="activeNames">-->
  <!--            <el-collapse-item name="1">-->
  <!--                <CodeMirror6Customed v-model="codeMirrorCode"></CodeMirror6Customed>-->
  <!--            </el-collapse-item>-->
  <!--        </el-collapse>-->
  <!--    </div>-->


</template>

<style scoped>

</style>